<template>
  <div class="index_product">
    <ul class="tab">
      <li v-for="item in tab" :key="item.id">
        <a @click="linkListPage(item)" class="more" :style="{color:app_tabBar.config.secondcolor,borderColor:app_tabBar.config.secondcolor}">
          <h3 :style="{color:app_tabBar.config.firstcolor}">{{item.name}}</h3>
        </a>
      </li>
    </ul>
    <swiper class="list" :show-dots="false" v-model="swiperIndex" ref="swiper">
      <swiper-item class="slide-item" v-for="item in data.list" :key="item.id">
        <div class="body">
          <figure @click="linkViewPage(item)">
            <img :src="item.imgurl" class="slide-image " ref="product_img" />
          </figure>
          <div class="content">
            <h4 @click="linkViewPage(item)" :style="{color:app_tabBar.config.firstcolor}">{{item.title}}</h4>
            <p class="desc" :style="{color:app_tabBar.config.secondcolor}">{{item.description}}</p>
            <p class="price">{{item.price}}</p>
          </div>
        </div>
      </swiper-item>
    </swiper>
    <div class="control-label">
      <div class="control-prev" @click="handlePrev" :style="{color:app_tabBar.config.secondcolor,borderColor:app_tabBar.config.secondcolor}">
        <i class="fa fa-angle-left"></i>
      </div>
      <a @click="linkMore" class="more" :style="{color:app_tabBar.config.secondcolor,borderColor:app_tabBar.config.secondcolor}">{{data.more_text}}</a>
      <div class="control-next" @click="handleNext" :style="{color:app_tabBar.config.secondcolor,borderColor:app_tabBar.config.secondcolor}">
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
  </div>
</template>
<script>
import { switchTab, navigateToViewPage, navigateToListPage } from '@/utils/index'
import { mapGetters } from 'vuex'
export default {
  props: {
    data: Object,
    tab: Array
  },
  mounted() {
    const img = this.$refs.product_img[0]
    img.onload = () => {
      this.$refs.swiper.xheight = img.height + 106 + 'px'
    }
  },
    computed: {
    ...mapGetters(['app_tabBar'])
  },
  data() {
    return {
      swiperIndex: 0
    }
  },
  methods: {
    handlePrev() {
      this.swiperIndex--
    },
    handleNext() {
      this.swiperIndex++
    },
    linkMore() {
      switchTab('product', this)
    },
    linkViewPage(item) {
      navigateToViewPage('product', item, this)
    },
    linkListPage(item) {
      switchTab('product', this)
      navigateToListPage(item, this)
    }
  }
}
</script>
<style lang="scss" scoped>
.index_product {
  .tab {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    overflow-x: scroll;
    width: 100%;
    li {
      flex: 1;
    }
    a {
      background: #fff;
      padding: 8px 30px;
      border-radius: 0;
      white-space: nowrap;
      border: #848484 1px solid;
      color: #444;
      font-size: 12px;
      margin-right: 10px;
      -webkit-transition: all 0.66s cubic-bezier(0.17, 0.84, 0.44, 1);
      transition: all 0.66s cubic-bezier(0.17, 0.84, 0.44, 1);
    }
  }
  .list {
    width: 100%;
    .content {
      text-align: left;
      border-bottom: 1px solid #999999;
      padding: 20px 20px 20px 0px;
      margin-bottom: 10px;
      h4 {
        font-size: 16px;
        color: #000;
        font-weight: 500;
      }
      .desc {
        font-size: 14px;
        color: #848484;
        height: 40px;
        overflow: hidden;
      }
    }
  }
  .control-label {
    display: flex;
    margin-top: 30px;
    justify-content: center;
    .more {
      margin: 0 15px;
    }
    .control-prev {
      padding: 2px 20px;
      border: #dcdcdc 1px solid;
      font-size: 19px;
      position: relative;
      color: #848484;
      &:hover {
        .fa {
          color: #fff;
        }
        background: #444;
        border-color: #444;
      }
    }

    .control-next {
      padding: 2px 20px;
      border: #dcdcdc 1px solid;
      font-size: 19px;
      position: relative;
      color: #848484;
      &:hover {
        .fa {
          color: #fff;
        }
        background: #444;
        border-color: #444;
      }
    }
  }
}
</style>
